<template>
	<view class="tabbar-container">
		<view class="tabbar-item" @click="jumpTo('statistic')">
			<uni-icons class="tabbar-item-icon" type="list" size="30" @click=""></uni-icons>
			<p>统计</p>
		</view>
		<view class="tabbar-item" @click="jumpTo('add')">
			<uni-icons class="tabbar-item-icon" type="plusempty" size="30"></uni-icons>
			<p>记账</p>
		</view>
		<view class="tabbar-item" @click="jumpTo('my')">
			<uni-icons class="tabbar-item-icon" type="person" size="30"></uni-icons>
			<p>我的</p>
		</view>
	</view>
</template>

<script>
	export default {
		name:"myTabbar",
		data() {
			return {
				
			};
		},
		methods:{
			jumpTo(route){
				uni.navigateTo({
					url: `/pages/${route}/${route}`,
				});
			}
		}
	}
</script>

<style>
.tabbar-container{
	position: fixed;
	bottom: 0;
	width: 100vw;
	height: 65px;
	line-height: 80px;
	display: flex;
	flex-direction: row;
	padding-top: 5px;
	border-top: 1px solid #eee;
}
.tabbar-item{
	position: relative;
	flex: 1;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.tabbar-item::before{
	content: '';
	position: absolute;
	top: 11px;
	height: 30px;
	width: 1px;
	background-color: gray;
}
.tabbar-item:nth-child(1)::before{
	width: 0;
}
.tabbar-item>p,.tabbar-item>.tabbar-item-icon{
	line-height: 100%;
}
.tabbar-item>.tabbar-item-icon{
	height: 30px;
	margin-bottom: 5px;
}
.tabbar-item>p{
	height: 20px;
}
</style>